<template>
  <div class="employees-container">
    <div class="app-container">
      <!-- 顶部菜单项 -->
      <!-- template包裹的插槽称之为具名插槽 -->
      <!-- 插槽的写法 -->
      <!-- 作用域插槽的目的：利用子组件的数据从父组件定制子组件的模板 -->
      <PageTools>
        <!-- 这个是用的匿名插槽 -->
        <span>本月: 社保在缴 公积金在缴</span>

        <!-- 这个是具名插槽 -->
        <template #right>
          <el-button type="warning" size="small" @click="$router.push('/import')">excel导入</el-button>
          <el-button type="danger" size="small" @click="handleExport">excel导出</el-button>
          <el-button icon="plus" type="primary" size="small" @click="showDialog = true">新增员工</el-button>
        </template>
      </PageTools>

      <el-card style="margin-top: 10px">
        <el-table v-loading="loading" border :data="list">
          <el-table-column label="序号" type="index" :index="handleIndex" sortable="" />
          <el-table-column label="姓名" prop="username" sortable="" />
          <el-table-column label="工号" prop="workNumber" sortable="" />
          <el-table-column label="聘用形式" prop="formOfEmployment" sortable="" :formatter="handleType">
            <!-- <template v-slot="{ row }"> -->
            <!-- 方法一 -->
            <!-- {{ row.formOfEmployment | formatType }}这是用插槽的形式做的，下面的是用函数做的 -->
            <!-- 方法二 -->
            <!-- {{ formatType(row.formOfEmployment) }} -->
            <!-- </template> -->
          </el-table-column>
          <el-table-column label="部门" prop="departmentName" sortable="" />
          <el-table-column label="入职时间" prop="timeOfEntry" sortable="">
            <template v-slot="{ row }">
              <!-- 格式化时间方法一（过滤器） -->
              <!-- {{ row.timeOfEntry | formatTime }} -->
              <!-- 格式化时间方法二（函数） -->
              {{ formatTime(row.timeOfEntry) }}
            </template>
          </el-table-column>

          <el-table-column label="账户状态" prop="enableState" sortable="">
            <template #default="{ row }">
              <el-switch
                v-model="row.enableState"
                :inactive-value="0"
                :active-value="1"
                active-color="#13ce66"
                inactive-color="lightgray"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" sortable="" fixed="right" width="280">
            <template #default="{ row }">
              <el-button type="text" size="small" @click="handleJump(row.id)">查看</el-button>
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button type="text" size="small" @click="assignRole(row.id)">角色</el-button>
              <el-button type="text" size="small" @click="handleDelete(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <div style="height: 60px; margin-top: 10px">
          <el-pagination
            :total="total"
            :current-page="queryData.page"
            :page-size="queryData.size"
            layout="prev, pager, next"
            @current-change="changePage"
          />
        </div>
      </el-card>
      <!-- 添加部门弹窗 -->
      <AddEmployee :show-dialog.sync="showDialog" @on-success="onSuccess" />
      <!-- <AddEmployee :show-dialog="showDialog" @on-success="onSuccess" @update:showDialog="showDialog = $event" /> -->
      <!-- 添加角色的弹窗 -->
      <AssignRole :show-role-dialog.sync="showRoleDialog" :current-user-id="currentUserId" />
    </div>
  </div>
</template>

<script>
import AssignRole from './components/assign-role.vue'
import AddEmployee from './components/AddEmployee.vue'
import { reqGetEmployeeList, reqDelEmployee } from '@/api/employees.js'
import moment from 'moment'
// 这个表示把文件里面的内容全部导入
import Types from '@/api/constant/employees'
export default {
  name: 'Employee',
  // 定义局部过滤器
  filters: {
    formatType(value) {
      // 这里的value是过滤器中最开始的值
      // 下面的代码的意思就是对所有的Types里面的数据的hireType中的数据，进行寻找，判断这里面的id的内容有没有等于最开始的过滤器左边的值的，如果有就把正在判断的那一项赋值给info。最后对info进行判断，如果存在info,那么就等于info里面的value，否则就显示默认
      const info = Types.hireType.find(item => item.id === value)
      return info ? info.value : '默认'
    }
  },
  // 注册组件
  components: { AddEmployee, AssignRole },

  data() {
    return {
      // 这个是分配角色时，获取的用户的id，也就是给谁分配id

      // 点击分配角色获取的id
      currentUserId: '',
      // 分配角色的弹窗的标志位
      showRoleDialog: false,
      // 弹框的状态
      showDialog: false,
      loading: false,
      // 员工列表数据
      list: [],
      // 列表总数
      total: 0,
      // 查询参数
      queryData: {
        page: 1,
        size: 10
      }
    }
  },
  created() {
    this.loadEmployeeList()
  },

  methods: {
    // 点击分配角色显示弹窗
    assignRole(id) {
      // 将获取的用户的id存储到data中
      this.currentUserId = id
      this.showRoleDialog = true
    },
    // 点击查看实现页面跳转
    handleJump(id) {
      this.$router.push('/employees/detail/' + id)
    },
    // 点击导出实现的功能
    // 导出的功能实现步骤
    // 导出excel
    async handleExport() {
      // 这个是设置导出按钮的权限
      if (!this.$isOk('export_employee_btn')) return
      // 1.调用接口获取所有员工的列表数据
      // 2.把后端返回的数据转换成为Excel需要的数据格式
      // 3.调用相关的API功能
      // 1.导出表头数据
      const headers = {
        姓名: 'username',
        手机号: 'mobile',
        入职日期: 'timeOfEntry',
        聘用形式: 'formOfEmployment',
        转正日期: 'correctionTime',
        工号: 'workNumber',
        部门: 'departmentName'
      }
      // 2.获取需要导出的员工的数据
      const rawData = await reqGetEmployeeList({ page: 1, size: 100000000 }) // 这里写成定值是因为可以获取所有的员工
      console.log(rawData)
      // 调用转换数据的函数
      const list = this.getExportData(headers, rawData.data.rows)
      // 导出的表格数据的表头
      // const title = ['姓名', '手机号', '入职日期]
      // Object.keys 是ES6提供的函数用于获取对象的所有的key，最终形成数组
      const title = Object.keys(headers)
      import('@/vendor/Export2Excel').then(excel => {
        excel.export_json_to_excel({
          header: title, // 表头 必填
          data: list, // 具体数据 必填
          filename: 'excel-list', // 非必填，导出文件名
          autoWidth: true, // 非必填,这个是导出的文件的列宽是不是自适应的
          bookType: 'xlsx' // 非必填，导出的文件类型
        })
      })
      // 模板为
      // import('@/vendor/Export2Excel').then(excel => {
      //   excel.export_json_to_excel({
      //     header: ['姓名', '工资'], // 表头 必填
      //     data: [
      //       ['刘备', 100],
      //       ['关羽', 500]
      //     ], // 具体数据 必填
      //     filename: 'excel-list', // 非必填
      //     autoWidth: true, // 非必填
      //     bookType: 'xlsx' // 非必填
      //   })
      // })
    },
    // 将导出的数据转换称为想要的格式,需要转换的有表头还有表身

    getExportData(headers, rawData) {
      // 这里面两个形参headers表示表头数据，rawData表示所有的员工的数据
      // 注意是将英文表头数据转成中文的
      const result = []
      rawData.forEach(item => {
        // 这里遍历出来的每一项，就是每一个对象，需要的是每一项里面的值
        // 定义一个空得对象来装重装的对象
        const row = []
        for (const key in headers) {
          // 将headers里面的值取出来
          const enKey = headers[key]
          // 将item里面的值取出来
          let attrValue = item[enKey]
          console.log(attrValue)
          if (['timeOfEntry', 'correctionTime'].includes(enKey)) {
            // 判断日期格式
            try {
              attrValue = moment(item[enKey]).format('yyyy-MM-DD')
            } catch {
              attrValue = '无效日期'
            }
            // 判断聘用形式
          } else if (enKey === 'formOfEmployment') {
            // 聘用形式，转换为汉字
            const info = Types.hireType.find(item => item.id === attrValue)
            attrValue = info ? info.value : '-----'
          }
          row.push(attrValue)
        }
        result.push(row)
      })
      // console.log(result)
      return result
    },
    // 格式化时间方法二
    formatTime(time) {
      return moment(time).format('YYYY-MM-DD')
    },
    // 格式化账户,这样写没有用
    // countType(row) {
    //   const info = Types.workingState.find(item => item.id === row.enableState)
    //   return info ? info.value : '默认'
    // },
    // 基于ElementUI的规则格式化数据
    // 方法三
    handleType(row) {
      const info = Types.hireType.find(item => item.id === row.formOfEmployment)
      return info ? info.value : '默认'
    },
    // 格式化聘用形式（通过函数的形式实现功能）
    // 方法二:格式化聘用形式
    // formatType(value) {
    //   const info = Types.hireType.find(item => item.id === value)
    //   return info ? info.value : '默认'
    // },
    // 获取员工列表数据
    async loadEmployeeList() {
      try {
        this.loading = true
        const ret = await reqGetEmployeeList(this.queryData)
        console.log(ret)
        // 判断获取列表是否成功
        if (ret.code === 10000) {
          // 成功
          // 将数据赋值给data中的list
          this.list = ret.data.rows
          // 将获取的total值赋值给data中的total
          this.total = ret.data.total
        } else {
          this.$message.error('获取员工列表失败')
        }
      } catch {
        this.$message.error('获取员工列表失败')
      } finally {
        this.loading = false
      }
    },
    // 控制页码是第几页
    changePage(page) {
      this.queryData.page = page
      this.loadEmployeeList()
    },
    // 删除员工
    async handleDelete(id) {
      console.log(id)
      // 删除员工
      const ret = await this.$confirm('确认要删除员工吗？, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      console.log(ret)
      // 点击取消操作
      if (ret === 'cancel') return
      // 点击确定操作
      try {
        const retDel = await reqDelEmployee(id)
        console.log(retDel)
        // 判断调用接口是否成功
        if (retDel.code === 10000) {
          // 成功，刷新列表
          this.loadEmployeeList()
          // this.$message.success('删除员工成功')
        } else {
          this.$message.error('删除员工失败')
        }
      } catch {
        this.$message.error('删除员工失败')
      }
    },
    onSuccess() {
      this.loadEmployeeList()
    },
    // 动态控制索引
    handleIndex(index) {
      // 形参index表示列表数据的索引，从0开始
      // 动态计算累加的索引
      // (当前页码 - 1) * 每页的条数
      // 当前页前面的页数*每页条数+index
      const { page, size } = this.queryData
      return (page - 1) * size + 1 + index
    }
  }
}
</script>

<style lang="scss" scoped></style>
